<script setup>
import {ref, reactive} from "vue";
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import {deleteUser, Userlist, AddUser} from "@/api/user";

let tableData = ref([])

const dialogVisible = ref(false)
const imageUrl = ref('')
const CurrentPage = ref('')
const PageSize = ref('')
const query = ref({
  pageNo:1,
  pageSize:10,
  total:10,
  name:'',
})

const getUserList = ()=>{
  Userlist(query.value).then(res=>{
    tableData.value = res.data.records
    query.value.total = res.data.total
  })
}
getUserList()

const user = ref({
  name: '',
  tele: '',
  password: '',
})

const showDialog = () => {
  dialogVisible.value = true
}
const PageSizeChange = (value) => {
  query.value.pageSize = value
  getUserList()
}
const PageCurrentChange = (value) => {
  query.value.pageNo = value
  getUserList()
}
const handleAvatarSuccess= (response, uploadFile) => {
  imageUrl.value = URL.createObjectURL(uploadFile.raw)
}
const beforeAvatarUpload = (rawFile) => {
  if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/png') {
    ElMessage.error('Avatar picture must be JPG format!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('Avatar picture size can not exceed 2MB!')
    return false
  }
  return true
}

const removeUser = (id)=>{
  const u = {
    id: id,
  }
  deleteUser(u).then(res=>{
    console.log(res)
    if (res.status) {
      ElMessage({
        message: '删除成功',
        type: 'success',
      })
      getUserList()
    }
    else {
      ElMessage.error('用户不存在, 请刷新页面')
    }
  })
}

const addUser = ()=>{
  dialogVisible.value = false
  AddUser(user.value).then(res=>{
    if (res.status) {
      ElMessage({
        message: '添加成功',
        type: 'success',
      })
      getUserList()
    }
    else {
      ElMessage.error('添加失败')
    }
  })
}

</script>

<template>
  <el-card class="page-container">
    <template #header>
      <div class="header">
        <span>用户列表</span>
        <el-row>
          <el-col :span="20">
            <el-form :inline="true" class="demo-form-inline">
              <el-form-item label="名称">
                <el-input v-model="query.name" placeholder="请输入名称" clearable />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="getUserList">查询</el-button>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col style="text-align: right" :span="4">
            <el-button type="primary" @click="showDialog">添加</el-button>
          </el-col>
        </el-row>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="gmtCreated" label="注册日期" width="180" />
          <el-table-column prop="name" label="姓名" width="180" />
          <el-table-column prop="tele" label="电话" />
          <el-table-column label="操作">
            <template #default="scope">
              <el-button text type="danger" @click="removeUser(scope.row.id)">
                删除
              </el-button>
<!--              <a :href="scope.row.url" download="头像.jpg">下载</a>-->
            </template>
          </el-table-column>
        </el-table>
        <div class="demo-pagination-block">
          <el-pagination
              v-model:current-page="PageNo"
              v-model:page-size="PageSize"
              :page-sizes="[1, 2, 5, 10]"
              :size="size"
              :background="true"
              layout="total, sizes, prev, pager, next, jumper"
              :total="query.total"
              @size-change="PageSizeChange"
              @current-change="PageCurrentChange"
          />
        </div>
      </div>
    </template>
  </el-card>

  <el-dialog
      v-model="dialogVisible"
      title="添加用户"
      width="500"
      :before-close="handleClose"
  >
    <span>
      <el-form-item label="名称">
      <el-input v-model="user.name" />
      </el-form-item>
      <br>
      <el-form-item label="电话">
      <el-input v-model="user.tele" />
      </el-form-item>
      <br>
      <el-form-item label="password">
      <el-input v-model="user.password" />
      </el-form-item>
    </span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="addUser">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>

</template>

<style scoped lang="scss">
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
